<template>
  <div>
    <div class="ordershipped">
      <div class="DataTableDiv">
        <div class="SecondRow">
          <div class="SecondRowLeft">
            <el-button
              type="primary"
              @click="addbanner"
              :style="{ marginLeft: '20px' }"
            >
              添加
            </el-button>
            <el-button :disabled="isButtonDisabled" @click="bulkOperation(2)">
              禁用
            </el-button>
            <el-button :disabled="isButtonDisabled" @click="bulkOperation(1)">
              启用
            </el-button>
            <el-button :disabled="isButtonDisabled" @click="bulkOperation(3)">
              删除
            </el-button>
          </div>
          <div class="SecondRowRight">
            <el-button
              circle
              icon="el-icon-refresh-right"
              :style="{ marginLeft: '20px' }"
              @click="Refresh"
            >
            </el-button>
          </div>
        </div>

        <el-table
          v-loading="BannerListLoading"
          :header-cell-style="{ 'text-align': 'center' }"
          :cell-style="{ 'text-align': 'center' }"
          :data="List"
          border
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" min-width="100"> </el-table-column>
          <el-table-column fixed prop="sort" label="排序" min-width="90">
          </el-table-column>
          <el-table-column prop="categoryName" label="分类名称" min-width="210">
          </el-table-column>

          <el-table-column label="图片" min-width="210">
            <template slot-scope="scope">
              <div class="flex-container">
                <img :src="scope.row.img" alt="商品图片" />
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="type" label="展示类型" min-width="181">
            <template slot-scope="scope">
              <div class="flex-container">
                <span>{{ scope.row.type === 1 ? "一级分类" : "活动" }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="count" label="展示类型" min-width="200">
            <template slot-scope="scope">
              <div class="flex-container">
                <span>{{ scope.row.count === 4 ? "一行" : "两行" }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态" min-width="181">
            <template slot-scope="scope">
              <div class="flex-container">
                <span>{{ scope.row.status === 1 ? "已启用" : "已禁用" }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" min-width="268">
            <template slot-scope="scope">
              <el-button
                @click="edithandle(scope.row)"
                type="text"
                size="small"
                style="margin-right: 10px"
                >编辑</el-button
              >

              <el-button
                slot="reference"
                type="text"
                size="small"
                @click="deletehandle(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!-- 添加/修改Banner组件 -->
    <HomeSetModel
      v-if="centerDialogVisible"
      :centerDialogVisible="centerDialogVisible"
      :enterType="enterType"
      :currentRow="currentRow"
      @cancelgoodesmodel="cancelgoodesmodel"
      @refresh-banners="Refresh"
    />
  </div>
</template>
<script>
import {
  AddBanner,
  QueryBannerList,
  batchtUpdate,
  InsertHomepage,
  UpdateHomepage,
  QueryHomepage,
  BatchUpdateHomepage,
  QueryClassification,
} from "@/api/mallApi/managementend/mallset";
import HomeSetModel from "@/views/mall/managementend/mallset/components/homeset-model.vue";
export default {
  name: "HomeSet",
  components: {
    HomeSetModel,
  },
  data() {
    return {
      BannerListLoading: false,
      //添加/修改 商品弹窗
      centerDialogVisible: false,
      currentRow: {}, // 保存当前行数据
      enterType: 0, // 默认值为1，表示从编辑按钮进入
      bannerList: [],
      List: [],
      selectedRows: [], //表格 多选内容
      isButtonDisabled: false, //checkbox 联动按钮
    };
  },
  methods: {
    bulkOperation(e) {
      let a = "删除";
      if (e === 1) {
        a = "启用";
      } else if (e === 2) {
        a = "禁用";
      } else if (e === 3) {
        a = "删除";
      }
      this.$confirm(`是否${a}该Banner信息？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          const data = {
            ids: this.selectedRows.map((banner) => banner.id),
            status: e,
          };
          BatchUpdateHomepage(data).then((res) => {
            if (res.code === "00000") {
              this.Refresh();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: `已取消${a}`,
          });
        });
    },
    deletehandle(row) {
      this.$confirm("是否删除该条数据信息？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          const data = {
            ids: [row.id],
            status: 3,
          };
          BatchUpdateHomepage(data).then((res) => {
            if (res.code === "00000") {
              this.$message({
                message: "删除成功",
                type: "success",
              });
              this.Refresh();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    Refresh() {
      this.BannerListLoading = true;
      QueryHomepage().then((res) => {
        if (res.code === "00000") {
          this.BannerListLoading = false;
          this.List = res.data;
        }
      });
    },
    handleSelectionChange(selection) {
      this.selectedRows = selection;
    }, //表格多选
    edithandle(row) {
      // 点击编辑按钮时触发
      this.currentRow = row; // 将当前行数据保存起来
      this.enterType = 2;
      this.centerDialogVisible = true; // 打开弹窗
    },
    cancelgoodesmodel(data) {
      // 弹窗关闭时触发，可以在这里重置数据或进行其他操作
      this.currentRow = {};
      this.centerDialogVisible = data;
      this.enterType = 0;
    },
    addbanner() {
      this.enterType = 1;
      this.centerDialogVisible = true; // 打开弹窗
    }, // 添加商品
  },
  mounted() {
    this.Refresh();
  },
  watch: {
    selectedRows: {
      handler(newValue) {
        // 数组发生变化时，isButtonDisabled计算属性会重新计算，从而更新按钮的禁用状态
        if (newValue.length === 0) {
          this.isButtonDisabled = true;
        } else {
          this.isButtonDisabled = false;
        }
      },
      deep: true,
      immediate: true, // 立即执行处理函数
    },
  },
};
</script>

<style scoped lang="scss">
.ordershipped {
  width: 98%;
  min-height: 750px;
  margin-top: 1%;
  margin-bottom: 1%;
  margin-left: 1%;
  background-color: #fff;
  overflow: hidden;
  .SecondRow {
    width: 100%;
    height: 65px;
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    .SecondRowLeft {
    }
  }
  .DataTableDiv {
    width: 98%;
    margin-left: 1%;
    margin-bottom: 15px;
    //表格
    .flex-container {
      display: flex;
      align-items: center; /* 垂直居中 */
      justify-content: space-around;
      > img {
        width: 60px;
        height: 60px;
      }
    }
  }
}
</style>
